<template>
    <div class="notes">
        <van-nav-bar title="查看订单" style="background-color: #FFF781;"/>
        <!-- 登录前的界面 -->
        <!-- <center><img src="../dist/images/person.png" alt=""></center> -->
        <!-- <center><van-button type="info" to="/login" size="normal" color="#1989FA">登录</van-button></center>  -->
    

        <!-- 登录后的界面 -->
        <van-tabs type="line" title-active-color="#1989fa"	animated="true" color="#1989fa" >
            <van-tab title="外卖" >
                 <van-row style="background-color:#FCFAC1">
                     <p>订单已完成 2019-12-18</p>
                    <van-col span="8">
                        <div class="dian_left" style="margin:10px 0px 10px 10px">                           
                            <img src="../dist/images/dianpu02.jpg" alt="" width="80%" >
                        </div>
                    </van-col>
                    <van-col span="16"><van-icon name="delete" size="20px" style=" float:right;right:10px;top:-30px"/>
                        <div class="dian_right" >
                            <div style="font-size:20px;">异次元烧烤</div>
                            <p style="font-size:14px;">羊肉串*100</p>
                            <p style="font-size:14px;">玉米*3</p>
                        </div>
                        <div>总共：100￥</div>
                    </van-col>
                    
                </van-row>
                 <van-row style="background-color:#FCFAC1">
                     <p>订单已完成 2019-12-18</p>
                    <van-col span="8">
                        <div class="dian_left" style="margin:10px 0px 10px 10px">                           
                            <img src="../dist/images/dianpu02.jpg" alt="" width="80%" >
                        </div>
                    </van-col>
                    <van-col span="16"><van-icon name="delete" size="20px" style=" float:right;right:10px;top:-30px"/>
                        <div class="dian_right" >
                            <div style="font-size:20px;">异次元烧烤</div>
                            <p style="font-size:14px;">羊肉串*100</p>
                            <p style="font-size:14px;">玉米*3</p>
                        </div>
                        <div>总共：100￥</div>
                    </van-col>
                    
                </van-row>

                 <van-row style="background-color:#FCFAC1">
                     <p>订单已完成 2019-12-18</p>
                    <van-col span="8">
                        <div class="dian_left" style="margin:10px 0px 10px 10px">                           
                            <img src="../dist/images/dianpu02.jpg" alt="" width="80%" >
                        </div>
                    </van-col>
                    <van-col span="16"><van-icon name="delete" size="20px" style=" float:right;right:10px;top:-30px"/>
                        <div class="dian_right" >
                            <div style="font-size:20px;">异次元烧烤</div>
                            <p style="font-size:14px;">羊肉串*100</p>
                            <p style="font-size:14px;">玉米*3</p>
                        </div>
                        <div>总共：100￥</div>
                    </van-col>
                    
                </van-row>
                 <van-row style="background-color:#FCFAC1">
                     <p>订单已完成 2019-12-18</p>
                    <van-col span="8">
                        <div class="dian_left" style="margin:10px 0px 10px 10px">                           
                            <img src="../dist/images/dianpu02.jpg" alt="" width="80%" >
                        </div>
                    </van-col>
                    <van-col span="16"><van-icon name="delete" size="20px" style=" float:right;right:10px;top:-30px"/>
                        <div class="dian_right" >
                            <div style="font-size:20px;">异次元烧烤</div>
                            <p style="font-size:14px;">羊肉串*100</p>
                            <p style="font-size:14px;">玉米*3</p>
                        </div>
                        <div>总共：100￥</div>
                    </van-col>
                    
                </van-row>

            </van-tab>
            <van-tab title="早餐">内容 2</van-tab>
            
        </van-tabs>



    
    <!-- 底 -->
    <van-tabbar route >
        <van-tabbar-item
            replace
            to="/"
            icon="home-o"
        >
            首页
        </van-tabbar-item>
        <van-tabbar-item
            replace
            to="/search"
            icon="search"
        >
            搜索
        </van-tabbar-item>
        <van-tabbar-item
            replace
            to="/notes"
            icon="notes-o"
        >
            订单
        </van-tabbar-item>
        <van-tabbar-item
            replace
            to="/about"
            icon="contact"
        >
            我的
        </van-tabbar-item>
    </van-tabbar>
    
    
    </div>

    
</template>








<style lang="stylus">
    .per{
        margin-top 100px
        margin-left 10%
       
    }
    
</style>